<template>
  <div class="app-container">
    <el-dialog
      :title="title"
      :visible.sync="openDetail"
      @close="cancel"
      width="600px"
      append-to-body
    >
      <div>
        <el-form ref="formA" :model="form" :rules="rules" label-width="auto" style="width: 500px;">
          <el-form-item label="检测项目" prop="checkItem" v-if="type=='edit'">
            <el-input v-model="form.checkItem" type="textarea" placeholder="请输入检测项目" />
          </el-form-item>
          <el-form-item label="所属工序" prop="workSequenceCode">
            <el-select v-model="form.workSequenceCode" placeholder="请选择工序名称">
              <el-option
                v-for="item in processCodeList"
                :key="item.processId"
                :label="item.processName+'('+item.processCode+')'"
                :value="item.processCode"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="检验类型" prop="checkType">
            <el-select v-model="form.checkType" placeholder="请选择检验类型">
              <el-option label="自检" :value="0"></el-option>
              <el-option label="互检" :value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="检测项目" prop="checkItem" v-if="type=='add'">
            <div style=" max-height:45vh;width:100%;overflow:auto">
              <div
                style="display: flex; align-items: center; "
                v-for="(item,index) in checkList"
                :key="index"
              >
                <el-input
                  v-model="item.checkItem"
                  type="textarea"
                  style="width: 300px;"
                  placeholder="请输入检测项目"
                />
                <span>
                  <i
                    class="el-icon-circle-plus-outline"
                    style="color: #1890ff;font-size:26px;margin-left:10px"
                    @click="addCheck"
                  ></i>
                  <i
                    class="el-icon-remove-outline"
                    style="color: #1890ff;font-size:26px;margin-left:10px"
                    v-if="index>0"
                    @click="delCheck(index)"
                  ></i>
                </span>
              </div>
            </div>
          </el-form-item>

          <!-- <el-row>
          <el-col :span="24">
            <el-form-item label="说明" prop="routeDesc">
              <el-input v-model="form.routeDesc" type="textarea" placeholder="请输入内容" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
            </el-form-item>
          </el-col>
          </el-row>-->
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
  
<script>
import {
  updateCheckConfDetail,
  processList,
  addCheckConfDetail
} from "@/api/mes/pro/inspection";

export default {
  data() {
    return {
      openDetail: false,
      title: "新增自检项目明细",
      // 表单参数
      form: {},
      loading: false,
      routeproductbomList: [],
      checkTemplateId: null,
      type: "add",
      // 选中数组
      ids: [],
      //物料编码
      itemCodes: [],
      measureCodes: [],
      //批量打印
      selectionList: [],
      processCodeList: [],
      rules: {
        workSequenceCode: [
          { required: true, message: "所属工序不能为空", trigger: "change" }
        ],
        checkType: [
          { required: true, message: "检验类型不能为空", trigger: "change" }
        ]
        // checkItem: [
        //   { required: true, message: "检测项目不能为空", trigger: "blur" }
        // ]
      },
      checkList: [
        {
          checkItem: ""
        }
      ]
    };
  },
  dicts: ["mes_order_status"],
  methods: {
    //初始化函数
    init(row, data, type) {
      this.getprocessList();
      console.log(row, data, "子组件的row");
      let query = {};
      this.checkTemplateId = row.id;
      this.form = { ...data };
      this.checkList = [
        {
          checkItem: ""
        }
      ];
      this.openDetail = true;
      this.type = type;
      console.log(this.form, "=========form-======");
    },
    //获取工序编码list
    getprocessList() {
      let query = {
        pageNum: 1,
        pageSize: 999
      };
      processList(query).then(res => {
        console.log(res, "工序编码list");
        this.processCodeList = res.rows;
      });
    },

    // 取消按钮
    cancel() {
      this.openDetail = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        checkTemplateId: null,
        checkItem: null,
        workSequenceName: null,
        workSequenceCode: null
      };
      // this.checkTemplateId = null
      this.autoGenFlag = false;
      this.resetForm("formA");
    },
    addCheck() {
      let obj = {
        checkItem: ""
      };
      this.checkList.push(obj);
    },
    delCheck(i) {
      this.checkList.splice(i, 1);
    },
    submitForm() {
      this.form.checkTemplateId = this.checkTemplateId;
      console.log(this.form, this.checkTemplateId, "=====qq=q=q=q=q====");
      let obj = this.processCodeList.filter(
        _ => _.processCode === this.form.workSequenceCode
      );
      if (obj && obj.length > 0) {
        this.form.workSequenceName = obj[0].processName;
      }
      if (this.type == "add") {
        let list = [];
        for (let i = 0; i < this.checkList.length; i++) {
          const element = this.checkList[i].checkItem;
          if (element) {
            list.push(element);
          } else {
            this.$modal.msgWarning("请填写检验项目！！！");
            return false;
          }
        }
        this.form.checkItems = list;
      }

      this.$refs["formA"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateCheckConfDetail(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.openDetail = false;
              this.$emit("parentList");
            });
          } else {
            addCheckConfDetail(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.openDetail = false;
              this.$emit("parentList");
            });
          }
        }
      });
    }
  }
};
</script>
  <style rel="stylesheet/scss" lang="scss" scoped>
.app-container ::v-deep .el-drawer__header {
  padding-top: 10px !important;
  padding-bottom: 5px !important;
  margin-bottom: 10px !important;
}

.bg-purple {
  display: flex;
  align-items: center;
  span:nth-child(1) {
    display: inline-block;
    // width: 100px;
    margin-right: 10px;
    white-space: nowrap;
    line-height: 30px;
  }
}
.titleDiv {
  font-weight: 700 !important;
  font-size: 20px;
}
</style>
  